<script setup lang="ts" name="Sidebar">
// import variables from '~/assets/styles/variables.module.scss' // 确保路径正确
const variables = {}
import SidebarItem from "./SidebarItem.vue";
import Logo from '../Loge/index.vue';

const route = useRoute();

const router = useRouter();

const appStore = useAppStore();

const settingsStore = useSettingsStore();

const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);

const sideTheme = computed(() => settingsStore.sideTheme);

const theme = computed(() => settingsStore.theme);

const isCollapse = computed(() => !appStore.sidebar.opened);

const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

const selectMenu = (key: string) => {
  router.push(key)
}

</script>

<template>
  <div>
    <div
        class="sidebar-box"
        :class="{'un-collapse': isCollapse}"
        :style="{ backgroundColor: sideTheme === 'dark' ? variables.menuBackground : variables.menuLightBackground }"
    >
      <logo />
      <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
        <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :background-color="sideTheme === 'dark' ? variables.menuBackground : variables.menuLightBackground"
            :text-color="sideTheme === 'dark' ? variables.menuColor : variables.menuLightColor"
            :unique-opened="true"
            :active-text-color="theme"
            :collapse-transition="false"
            mode="vertical"
            @select="selectMenu"
        >
          <sidebar-item
              v-for="(route, index) in sidebarRouters"
              :key="route.path + index"
              :item="route"
              :base-path="permissionStore.sidebarBasePath"
          />
        </el-menu>
      </el-scrollbar>
    </div>

  </div>
</template>

<style scoped lang="scss">
.sidebar-box {
  position: fixed;
  z-index: 1000;
}
</style>